<template>
  <view>
    <!-- 搜索框 -->
    <YgSearch></YgSearch>
    <!-- 轮播图 -->
    <u-swiper :list="swiperLits" name="image_src"></u-swiper>
    <!-- 导航 -->
    <view class="catitem u-flex">
      <navigator
        class="u-flex-1 u-p-30"
        v-for="item in catitems"
        :key="item.name"
      >
        <!-- <image mode="widthFix" :src="item.image_src" /> -->
        <u-image width="100%" mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floot">
      <view class="floot-group" v-for="(item1, index1) in floors" :key="index1">
        <view class="group-title"
          ><u-image mode="widthFix" :src="item1.floor_title.image_src"></u-image
        ></view>
        <view class="group-content">
          <navigator
            v-for="(item2, index2) in item1.product_list"
            :key="item2.name"
          >
            <!-- 当image使用widthFix属性宽高属性无效 -->
            <!-- 三元方式 -->
            <u-image
              height="100%"
              :mode="index2 === 0 ? 'widthFix' : 'scaleToFill'"
              :src="item2.image_src"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperLits: [],
      // 导航数组
      catitems: [],
      // 楼层
      floors: [],
    };
  },
  // 异步操作async   await
  // 获取轮播图数据
  async onLoad() {
    // const [err, res] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    // });
    // console.log(res);
    // // 给每个数组添加个属性image属性值v.image_src
    // this.swiperLits = res.data.message.map((v) => ({
    //   ...v,
    //   image: v.image_src,
    // }));
    // 页面加载
    const resswiper = await this.$u.get("/home/swiperdata");
    this.swiperLits = resswiper.message;
    // 导航
    const resCata = await this.$u.get("/home/catitems");
    this.catitems = resCata.message;
    // 楼层
    const resFloot = await this.$u.get("/home/floordata");
    this.floors = resFloot.message;
  },
};
</script>

<style lang="scss">
// 楼层
.floot {
  .floot-group {
    .group-title {
    }
    .group-content {
      // 清除浮动
      overflow: hidden;
      navigator {
        float: left;
        width: 33.3%;
        border-left: 5rpx solid #fff;
        border-right: 5rpx solid #fff;
        // height: 188rpx;
      }
      navigator:nth-last-child(-n + 4) {
        // 后四个
        height: 195rpx;
      }
      navigator:nth-last-child(-n + 2) {
        // 后二个
        margin-top: 10rpx;
      }
    }
  }
}
</style>
